// components/AppLayout.tsx
'use client';
import { useState } from 'react'
import { Layout, Menu, Cascader } from 'antd';
import { usePathname, useRouter } from 'next/navigation';
import { menuItems } from './menu';
import { Breadcrumb, Space, Tabs, Select, } from 'antd';
import type { TabsProps, CascaderProps } from 'antd';
import Link from 'next/link';
import {
  FileDoneOutlined,
  CalendarOutlined,
  BulbOutlined,
  LockOutlined,
} from '@ant-design/icons';
const { Header, Sider, Content } = Layout;
interface Option {
  value: string;
  label: string;
  children?: Option[];
}
const options: Option[] = [//用户中心、修改资料等
  {
    value: '修改资料',
    label: '修改资料'
  },
  {
    value: '修改头像',
    label: '修改头像',
  },
  {
    value: '修改密码',
    label: '修改密码',
  },
  {
    value: '退出系统',
    label: '退出系统',
  },
];
export default function AppLayout({ children }: { children: React.ReactNode }) {
  const router = useRouter();
  const pathname = usePathname();
  // const [text, setText] = useState('Unselect');
  const onChange: CascaderProps<Option>['onChange'] = (_, selectedOptions) => {

  };
  const getParentKeys = (path: string): string[] => {
    const keys: string[] = [];
    let currentPath = path;
    // 分割路径并生成所有父级路径
    const segments = currentPath.split('/').filter(Boolean);
    let accumulatedPath = '';
    for (const segment of segments.slice(0, -1)) {
      accumulatedPath += `/${segment}`;
      keys.push(accumulatedPath);
    }
    return keys;
  };
    const getSidebarItems = (path: string) => {
      // 找到最匹配的一级菜单
      const matchedTopItem = menuItems.find(item => 
        path.startsWith(item.key)
      );
      return matchedTopItem?.children || [];
    };
  return (
    <Layout style={{ minHeight: '100vh',background:"white" }}>
      {/* 顶部导航（一级菜单） */}
      <Header style={{ background: 'rgb(88, 163, 247)', display: "flex", justifyContent: "space-between" }}>
        <Space>
          <div>
            <p style={{ color: "white", fontSize: "20px" }}>客户关系管理系统</p>
          </div>
          <Menu
            style={{ background: 'rgb(88, 163, 247)', fontSize: "20px" }}
            theme="dark"
            mode="horizontal"
            selectedKeys={[pathname]}
            items={menuItems.map(item => ({
              key: item.key,
              label: item.label,
            }))}
            onSelect={({ key }) => {
              router.push(key)
            }}
          />
        </Space>

        <Space> {/*  //header右侧菜单,个人头像、退出登录 */}
          {/* <Menu
            style={{ background: 'rgb(88, 163, 247)', fontSize: "20px" }}
            theme="dark"
            mode="horizontal"
            selectedKeys={[1]}
            onClick={()=>{}} 
            items={[
              {
                key: 1,
                icon: <FileDoneOutlined />,
                label: "事项"
              },
              {
                key: 2,
                icon: <CalendarOutlined />,
                label: "日程"
              },
              {
                key: 3,
                icon: <BulbOutlined />,
                label: "消息"
              },
              {
                key: 4,
                icon: <LockOutlined />,
                label: "锁屏"
              },
            ]}
          /> */}

          <span>
            <Cascader options={options} onChange={onChange}>
              <p style={{ color: "white", fontSize: "20px" }}>用户中心</p>
            </Cascader>
          </span>
        </Space>
      </Header>

      <Layout>
        {/* 侧边栏 */}
        <Sider style={{background:'white'}}>
          <Menu
            mode="inline"
            theme='light'
            style={{ background: 'white' }}
            selectedKeys={[pathname]}
            defaultOpenKeys={getParentKeys(pathname)}
            items={getSidebarItems(pathname)}
            onSelect={({ key }) => {
              router.push(key)
            }}
          />
        </Sider>

        {/* 内容区域 */}
        <Breadcrumb
/>
        <Content style={{ padding: 24 }}>
          {children}
        </Content>
      </Layout>
    </Layout>
  );
}